<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="交易日期">
							<cl-date-picker
								v-model="search.timeList"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								style="width: 210px"
							/>
						</cl-filter>
						<cl-filter label="商户号">
							<el-input
								v-model="search.merchant_no"
								placeholder="请输入商户号"
								clearable
								style="width: 200px"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
				<el-row>
					<el-button @click="importExcel" type="primary">导入</el-button>
					<el-button :disabled="!selectedRows.length" @click="chekcList" type="danger"
						>批量删除</el-button
					>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<el-row>
				<cl-table @selection-change="handleSelectionChange" v-bind="tableProp"> </cl-table>
			</el-row>
			<template slot="foot">
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination
						:props="{
							pageSizes: [50, 100, 500, 1000]
						}"
					/>
				</el-row>
			</template>
		</cl-pagefull>
		<UploadExcel
			ref="uploadExcelRef"
			title="上传收银对账EXCEL"
			apiUrl="/audit/cashierReconciliation/uploadFile"
			downUrl="https://yanzichu.oss-cn-beijing.aliyuncs.com/%E8%B4%A6%E5%8D%95%E7%A4%BA%E4%BE%8B%E8%A1%A8.xlsx"
		/>
	</cl-crud>
</template>

<script>
import UploadExcel from "@/components/upload-excel";
import pageMinix from "@/mixins/page";
import dayjs from "dayjs";
export default {
	name: "reconciliationList",
	mixins: [pageMinix],
	components: { UploadExcel },
	data() {
		return {
			dialogVisible: false,
			saveLoading: false,
			tableProp: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "",
						type: "selection",
						minWidth: 100,
						align: "left"
					},
					{
						label: "收款渠道",
						prop: "payment_channel",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "交易时间",
						prop: "transaction_time",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "结算商户号",
						prop: "merchant_no",
						minWidth: 150,
						align: "center",
						showOverflowTooltip: true
					},
					{
						label: "结算商户全称",
						prop: "merchant_name",
						minWidth: 150,
						align: "center",
						showOverflowTooltip: true
					},
					{
						label: "主商户简称",
						prop: "main_merchant_shortname",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "支付方式",
						prop: "payment_method",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "订单号",
						prop: "order_no",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "交易金额",
						prop: "transaction_amount",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "支付方订单号",
						prop: "third_party_order_no",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "备注",
						prop: "remark",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					}
				]
			},
			search: {
				timeList: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
				biz_id: "",
				size: 50
			},
			selectedRows: []
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		// this.getUserList(this.search.biz_id);
		// this.getBizRefShop(this.search.biz_id);
	},
	mounted() {},
	methods: {
		handleSelectionChange(selection) {
			this.selectedRows = selection;
		},
		chekcList() {
			console.log("选中的数据:", this.selectedRows);
			if (this.selectedRows.map(item => item.id).length == 0) {
				return this.$message.warning("请选择要删除的账单");
			} else {
				this.$confirm("确定要删除吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$service.reconciliation
						.reconciliationDel({
							id: this.selectedRows.map(item => item.id)
						})
						.then(res => {
							this.$message.success("删除成功");
							this.refresh();
						});
				});
			}
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.reconciliation)
				.set("dict", {
					api: {
						page: "reconciliationList"
					}
				})
				.done();
			app.refresh(this.search);
		},

		refresh() {
			const refresh = this.$refs.crud.refresh;
			refresh && refresh({ page: 1, ...this.search });
		},
		importExcel() {
			this.$refs.uploadExcelRef.open();
		}
	}
};
</script>
<style scoped lang="scss"></style>
